<template>
	<view class="task-info-display-container" v-if="taskInfo">
		<!-- 顶部用户信息 -->
		<view class="header-section">
			<view class="left-section">
				<image class="avatar" :src="publisherAvatar" mode="aspectFill"></image>
				<text class="nickname">{{ taskInfo.userName || '匿名用户' }}</text>
			</view>
			<!-- 右侧插槽，用于放置特定页面的操作按钮，如关注、三点菜单等 -->
			<view class="right-section">
				<slot name="actions"></slot>
			</view>
		</view>

		<!-- 任务图片 -->
		<view v-if="getImageList(taskInfo).length > 0">
			<swiper class="task-main-swiper" indicator-dots="true" autoplay="false" circular="false">
				<swiper-item v-for="(img, idx) in getImageList(taskInfo)" :key="idx">
					<image class="task-main-image" :src="getFullImageUrl(img)" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<image v-else-if="taskInfo.imageUrl" class="task-main-image" :src="getFullImageUrl(taskInfo.imageUrl)" mode="aspectFit"></image>

		<!-- 任务标题和内容 -->
		<view class="task-content-section">
			<view class="title-container">
				<text class="task-title">{{ taskInfo.jobName || taskInfo.title }}</text>
				<!-- 新增：右上角插槽 -->
				<view class="top-right-slot">
					<slot name="top-right"></slot>
				</view>
			</view>
			<text class="task-description">{{ taskInfo.content }}</text>
			<view class="task-meta">
				<text class="location">{{ taskInfo.location }}</text>
				<text class="date">{{ taskInfo.createTime }}</text>
			</view>
		</view>

		<!-- 任务详情部分 -->
		<view class="task-detail-section">
			<!-- 职位信息 -->
			<view class="section-title">职位信息</view>
			<view class="info-row"><text class="label">职位名称：</text><text>{{ taskInfo.jobName || '-' }}</text></view>
			<view class="info-row"><text class="label">职位类别：</text><text>{{ taskInfo.category || taskInfo.taskCategory || taskInfo.categoryName || '-' }}</text></view>
			<view class="info-row"><text class="label">工作内容：</text><text>{{ taskInfo.content || '-' }}</text></view>

			<!-- 工作地点 -->
			<view class="section-title">工作地点</view>
			<view class="info-row"><text class="label">城市：</text><text>{{ taskInfo.city || '-' }}</text></view>
			<view class="info-row"><text class="label">区域：</text><text>{{ taskInfo.district || '-' }}</text></view>
			<view class="info-row"><text class="label">详细地址：</text><text>{{ taskInfo.location || '-' }}</text></view>

			<!-- 工作周期 -->
			<view class="section-title">工作周期</view>
			<view class="info-row"><text class="label">类型：</text><text>{{ taskInfo.periodType === 'long' ? '长期' : (taskInfo.periodType === 'short' ? '短期' : '-') }}</text></view>
			<view v-if="taskInfo.periodType === 'long'">
				<view class="info-row"><text class="label">时长要求：</text><text>{{ taskInfo.duration || '-' }}</text></view>
				<view class="info-row"><text class="label">每周工作周期：</text><text>{{ taskInfo.workPeriod || '-' }}</text></view>
				<view class="info-row"><text class="label">工作时段：</text><text>{{ taskInfo.workTime || '-' }}</text></view>
			</view>
			<view v-else-if="taskInfo.periodType === 'short'">
				<view class="info-row"><text class="label">工作日期：</text><text>{{ taskInfo.shortStartDate || '-' }} 至 {{ taskInfo.shortEndDate || '-' }}</text></view>
				<view class="info-row"><text class="label">工作时段：</text><text>{{ taskInfo.workTime || '-' }}</text></view>
			</view>

			<!-- 薪资待遇 -->
			<view class="section-title">薪资待遇</view>
			<view class="info-row"><text class="label">结算方式：</text><text>{{ taskInfo.salaryType || '-' }}</text></view>
			<view class="info-row"><text class="label">薪资水平：</text><text>{{ taskInfo.price ? taskInfo.price + (taskInfo.salaryUnit ? taskInfo.salaryUnit : '元') : '-' }}</text></view>
			<view class="info-row"><text class="label">薪资说明：</text><text>{{ taskInfo.salaryDesc || '-' }}</text></view>
			<view class="info-row"><text class="label">其他福利：</text><text>{{ benefitsDisplay }}</text></view>

			<!-- 联系方式（脱敏） -->
			<view class="section-title">联系方式</view>
			<view class="info-row"><text class="label">联系人：</text><text>{{ taskInfo.contactName ? maskName(taskInfo.contactName) : '-' }}</text></view>
			<view class="info-row"><text class="label">联系电话：</text><text>{{ taskInfo.contactPhone ? maskPhone(taskInfo.contactPhone) : '-' }}</text></view>
			<view class="info-row"><text class="label">邮箱：</text><text>{{ taskInfo.contactEmail || taskInfo.email || taskInfo.contactWechat || '-' }}</text></view>

			<!-- 人员要求 -->
			<view class="section-title">人员要求</view>
			<view class="info-row"><text class="label">学历：</text><text>{{ taskInfo.education || '-' }}</text></view>
			<view class="info-row"><text class="label">性别：</text><text>{{ taskInfo.gender || '-' }}</text></view>
			<view class="info-row"><text class="label">年龄：</text><text>{{ taskInfo.age || '-' }}</text></view>
		</view>
	</view>
</template>

<script>
	import config from '@/config/config.js';

	export default {
		name: "task-info-display",
		props: {
			taskInfo: {
				type: Object,
				default: null
			}
		},
		computed: {
			publisherAvatar() {
				if (!this.taskInfo || !this.taskInfo.userAvatar) {
					return '/static/default-avatar.png';
				}
				const avatar = this.taskInfo.userAvatar;
				if (avatar && avatar.startsWith('http')) {
					return avatar;
				}
				if (avatar) {
					return config.baseUrl + config.apiPrefix + avatar;
				}
				return '/static/default-avatar.png';
			},
			benefitsDisplay() {
				const b = this.taskInfo && this.taskInfo.benefits;
				if (Array.isArray(b)) return b.length ? b.join('、') : '-';
				if (typeof b === 'string' && b.trim()) return b.split(',').join('、');
				return '-';
			}
		},
		methods: {
			formatDate(time) {
				if (!time) return '';
				let date = new Date(time);
				// 格式化: yyyy-MM-dd
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},
			getImageList(task) {
				if (!task) return [];
				if (Array.isArray(task.imageUrls)) return task.imageUrls.filter(Boolean);
				if (typeof task.imageUrls === 'string' && task.imageUrls.trim()) {
					return task.imageUrls.split(',').filter(Boolean);
				}
				return [];
			},
			getFullImageUrl(url) {
				if (!url) return '/static/default-avatar.png';
				if (url.startsWith('http')) return url;
				return config.baseUrl + config.apiPrefix + url;
			},
			maskName(name) {
				if (!name) return '';
				return name.length > 1 ? name.substring(0, 1) + '*' : name;
			},
			maskPhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},
			maskEmail(email) {
				if (!email) return '';
				let parts = email.split('@');
				if (parts[0].length > 3) {
					return parts[0].substring(0, 3) + '***@' + parts[1];
				}
				return email;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task-info-display-container {
		background-color: #f8f8f8;
	}

	.header-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #ffffff;
	}

	.left-section {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.nickname {
		font-size: 30rpx;
		font-weight: bold;
	}

	.right-section {
		display: flex;
		align-items: center;
	}

	.task-main-swiper {
		height: 400rpx;
	}

	.task-main-image {
		width: 100%;
		height: 400rpx;
		background-color: #eee;
	}

	.task-content-section {
		position: relative;
		padding: 20rpx;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}

	.title-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.top-right-slot {
		/* No longer needs absolute positioning */
	}

	.task-title {
		font-size: 36rpx;
		font-weight: bold;
		/* display: block; is no longer needed */
		/* margin-bottom: 10rpx; is moved to title-container */
	}

	.task-description {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 20rpx;
	}

	.task-meta {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}

	.task-detail-section {
		padding: 20rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #f0f0f0;

		&:first-child {
			margin-top: 0;
		}
	}

	.info-row {
		display: flex;
		font-size: 28rpx;
		margin-bottom: 15rpx;
		color: #333;

		.label {
			color: #888;
			width: 180rpx;
			flex-shrink: 0;
		}
	}
</style> 